<template>
  <div class="content-wrapper">
    <div class="content-header">批生产记录</div>
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="产品项目">
          <el-cascader
            ref="cascader"
            v-model="ProducValue"
            :options="ProductList"
            @change="change"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="批号">
          <el-input v-model="listQuery.batchCode" placeholder="输入批号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getDataList"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        height="500"
        v-loading="listLoading"
        :data="list"
        highlight-current-row
      >
        <el-table-column label="产品项目" prop="productDictValue" min-width="100px"/>
        <el-table-column
          label="产品子项"
          prop="subProductDictValue"
          min-width="100px"
        />
        <el-table-column
          label="批号"
          prop="batchCode"
          width="100px"
          align="center"
        />
        <el-table-column
          label="状态"
          prop="status"
          width="100px"
          :formatter="
          (row, column, cellValue, index) => {
            return status[cellValue]
          }
        "
        />
        <el-table-column label="记录个数" prop="recordCount" width="100px"/>
        <el-table-column label="审核人" prop="checkUserName" width="100px"/>
        <!-- <el-table-column label="审核时间" prop="checkTime" width="160px" /> -->
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more"/>
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="getView(row)"
                >查看
                </el-dropdown-item
                >
                <el-dropdown-item @click.native="pushQa(row)" v-if="row.status != 2"
                >提交QA审核
                </el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="批生产列表" :visible.sync="viewDialog">
        <el-table :data="dataList.data">
          <el-table-column
            property="productDictValue"
            label="产品项目"
            width="150"
          ></el-table-column>
          <el-table-column
            property="subProductDictValue"
            label="产品子项"
            width="200"
          ></el-table-column>
          <el-table-column property="batchCode" label="批号"></el-table-column>
          <el-table-column
            property="status"
            label="状态"
            :formatter="
            (row, column, cellValue, index) => {
              return recordStatus[cellValue]
            }
          "
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button size="mini" type="success" @click="viewRecord(row)">查看</el-button>
              <el-button size="mini" type="danger" @click="applyFor(row)"
                         v-if="row.status==4"
              >申请修改
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog
        title="申请修改"
        :visible.sync="applyFordialogVisible"
        width="45%"
      >
        <el-form label-width="80px">
          <el-form-item label="选择审批人">
            <el-tag v-if="this.from.receiveUserName">{{
                this.from.receiveUserName
              }}
            </el-tag>
            <span
              class="el-icon-circle-plus-outline button-icon"
              @click="openReview(0, 'qa', 'QA')"
            ></span
            ></el-form-item>
          <el-form-item label="修改理由"
          >
            <el-input
              type="textarea"
              maxlength="100"
              placeholder="请输入内容"
              v-model="from.reason"
            ></el-input
            >
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="applyFordialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pushApplyFor">确 定</el-button>
      </span>
      </el-dialog>
      <Pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getDataList"
      />
      <SearchPersonnelType
        :SearchPersonnelTypeData="SearchPersonnelTypeData"
        @dataList="statusMessage"
      ></SearchPersonnelType>


      <SearchPersonnelType
        :SearchPersonnelTypeData="SelectPersonnelData"
        @dataList="commitQA"
      ></SearchPersonnelType>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {getLotProduction, pushApplyForData, viewLotProduction, pushQa} from '@/api/rs/manufacture.js'
import Selective from '@/views/manufacture/components/Selective/Selective.vue'
import SearchPersonnelType from '@/components/SearchUserType/index.vue'
import {listDictTreeItem} from "@/api/base/dict";

export default {
  components: {Pagination, Selective, SearchPersonnelType},
  data() {
    return {
      status: {
        0: '未提交审核',
        1: '已提交审核',
        2: '已审核'
      },
      recordStatus: {
        0: '未记录',
        1: '记录中',
        2: '记录异常',
        3: '提交修改',
        4: '提交批生产记录',
      },
      total: 99,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        subProductDictCode: '',
        batchCode: ''
      },
      inputData: '',
      selectValue: '',
      listLoading: false,
      list: [{}],
      dataList: {},
      viewDialog: false,
      SelectPersonnelData: '',
      applyFordialogVisible: false,
      from: {
        receiveUserName: '',
        receiveUserId: '',
        reason: ''
      },
      SearchPersonnelTypeData: {
        dialogVisible: false
      },
      manufactureArchiveId: "",
      ProducValue: null,
      ProductList: []
    }
  },
  mounted() {
    this.getDataList()
    this.listDictTreeItem()
  },
  methods: {
    change(val){
      this.listQuery.subProductDictCode = val[1]
    },
    listDictTreeItem(){
      listDictTreeItem({
        dictGroupCode: 'product',
        parentDictId: 0
      }).then(res => {
        this.ProductList = res.data
      })
    },
    openReview(val, type, title) {
      // 0为角色 1为角色（总经理，总监） 3为架构 4为架构多选 5部门多选
      this.reviewWindow = val
      if (val == 0) {
        // console.log(this.temp, '管理员')
        // if (
        //   this.temp.documentLevelNum == 1 ||
        //   this.temp.documentLevelNum == 2
        // ) {
        //   type = 'management-representative'
        //   title = '管理者代表'
        // } else {
        //   type = 'qa'
        //   title = 'QA'
        // }
        type = 'qa'
        title = 'QA'
        this.SearchPersonnelTypeData = {
          val: val,
          type: type,
          dialogVisible: true,
          title: title
        }
      }
    },
    /**
     * 提交QA
     */
    pushApplyFor() {
      this.applyFordialogVisible = false
      let data = {
        manufactureRecordId: this.manufactureRecordId,
        modifyUserId: this.from.receiveUserId,
        reason: this.from.reason
      }
      pushApplyForData(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: '申请成功',
            type: 'success'
          })
          this.getDataList()
        }
      })
    },
    // 申请修改
    applyFor(row) {
      this.applyFordialogVisible = true
      this.manufactureRecordId = row.manufactureRecordId
    },
    /**
     * 查看记录文档
     * @param row
     */
    viewRecord(row) {
      window.open(
        'onlyoffice/createDocument.html?&token=' +
        this.$store.getters.token +
        '&documentId=' +
        row.dataRecordId +
        '&mode=view' +
        '&urldata=' +
        process.env.VUE_APP_BASE_API
      )
    },
    //获取人员
    getPersonnel() {
      this.SelectPersonnelData = {
        dialogReview: true
      }
    },
    // 分页
    getDataList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      getLotProduction(this.listQuery).then((res) => {
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    // 获取数据
    async getView(row) {
      this.viewDialog = true
      let data = {manufactureArchiveId: row.manufactureArchiveId}
      this.dataList = await viewLotProduction(data)
    },
    // 提交Qa审核
    pushQa(row) {
      this.SelectPersonnelData = {
        val: 0,
        type: 'qa',
        title: 'QA',
        dialogVisible: true
      }
      this.manufactureArchiveId = row.manufactureArchiveId
    },
    // 占位
    statusMessage(data) {
      console.log(data, 'datass')
      if (data == 1) {
        this.getDataList()
      }
      if (data && data.length > 0) {
        this.from.receiveUserName = data[0].userName
        this.from.receiveUserId = data[0].userId
      }
    },
    /**
     * 提交QA回调函数
     * @param data
     */
    commitQA(data){
      let user = data[0]
      let saveData = {
        qauserId: user.userId,
        manufactureArchiveId: this.manufactureArchiveId
      }
      pushQa(saveData).then(res => {
        this.$message.success('提交成功')
      })
    }
  }
}
</script>
